/*
    地图界面
 */

import React from "react";
import { View, FlatList, Text, TouchableOpacity } from "react-native";
import { BProps, BState, HeaderView, BaseComponent, Styled } from "../../index";
import { NoDataList, ItemList } from "./ItemListLayout";
import { R } from '../../../core';
import {IconFont } from 'enoad-common/src/index';
import StoreShopCard from "../module/StoreShopCard";

interface IProps extends BProps {
  data?: any;
}

export default class ShopCardComponent extends BaseComponent<IProps, BState> {
  shopData: StoreShopCard;
  cardData: any; //购物车数据
  cardLayout: any; //购物车布局（这里从上个界面传递过来）
  constructor(props: BProps) {
    super(props);
    this.shopData = new StoreShopCard("Visit");
    this.cardData =
      this.props.navigator &&
      this.props.navigator.param &&
      this.props.navigator.param.cardData;
    this.cardLayout =
      this.props.navigator &&
      this.props.navigator.param &&
      this.props.navigator.param.cardLayout;
  }

  selectAuthor() {
    return (
      <View style={[Styled.SearchView.item, { height: 46 }]}>
        <View style={{ flexDirection: "row", flex: 1, padding: 10 }}>
          <Text style={[Styled.SearchView.shop_search_text, { fontSize: 13 }]}>
            {"客户名称"}
          </Text>
          <Text style={[Styled.SearchView.shop_search_text, { fontSize: 13 }]}>
            {"｜"}
          </Text>
          <Text style={[Styled.SearchView.shop_search_text, { fontSize: 13 }]}>
            {"价格表名称"}
          </Text>
        </View>
        <TouchableOpacity style={{ paddingRight: 15 }} onPress={() => {}}>
          <Text
            style={[
              Styled.SearchView.shop_search_text,
              {
                fontSize: 14,
                backgroundColor: "#1D77FF",
                borderRadius: 15,
                color: R.color.white,
                padding: 5,
                paddingLeft: 10,
                paddingRight: 10,
              },
            ]}
          >
            {"促销优惠"}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  selectBusiType() {
    return (
      <View style={[Styled.SearchView.item, { height: 46 }]}>
        <View style={{ flexDirection: "row", flex: 1, padding: 10 }}>
          <Text style={[Styled.SearchView.shop_search_text, { fontSize: 13 }]}>
            {"订单明细的业务类型名称"}
          </Text>
        </View>
      </View>
    );
  }

  /**
   * 顶部标题栏
   * @returns
   */
  renderCenter = () => {
    return (
      <Text
        numberOfLines={1}
        style={[R.styles.navigationTitleFont, { color: "#262626" }]}
      >
        {(this.props.navigator &&
          this.props.navigator.param &&
          this.props.navigator.param.title) ||
          this.props.title ||
          "购物车"}
      </Text>
    );
  };

  shopList = (data: any, layout: object) => {
    if (data && data.length > 0) {
      //有值进行展示
      return (
        <FlatList
          keyboardShouldPersistTaps="always"
          style={{ flex: 1,marginBottom:58 }}
          data={data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item, index }) => {
            return this.listItem(item, index, layout);
          }}
        />
      );
    } else {
      return (
        <NoDataList
          componentId={this.props.componentId}
          actions={this.props.actions}
        />
      );
    }
  };

  listItem = (item: any, index: number, layout: any) => {
    //根据业务类型的key获取对应数据
    let layouts = new Array();
    //线路数据集合
    layouts.push(
      <ItemList
        key={index.toString() + item.id}
        dataSource={item}
        showItems={layout}
        actions={this.props.actions}
        componentId={this.props.componentId}
        storeShop={this.shopData}
      />
    );
    return layouts;
  };

  footView() {
    return (
      <View
        style={{
          position: "absolute",
          bottom: 0,
          height: 48,
          paddingLeft: 20,
          flexDirection: "row",
          width: "100%",
          alignItems: "center",
          backgroundColor:"#ffffff"
        }}
      >
        <TouchableOpacity onPress={() => {}}>
          <IconFont name={"xuanze1"} size={24} color={"#C5CBD6"} />
        </TouchableOpacity>
        <Text style={{ marginLeft: 10, color: "#182437", fontSize: 14 }}>
          {"全选"}
        </Text>
        <View style={{ flex: 1 }} />
        <Text style={{ marginRight: 10, color: "#182437", fontSize: 14 }}>
          {"合计 : "}
        </Text>

        <TouchableOpacity
          style={{
            height: 48,
            backgroundColor: "#4E80F5",
            width: 100,
            alignItems: "center",
          }}
          onPress={() => {}}
        >
          <Text style={{ lineHeight: 48, color: "#FFFFFF", fontSize: 16 }}>
            {"结算()"}
          </Text>
        </TouchableOpacity>
      </View>
    );
  }

  render() {
    return (
      <View style={{ flex: 1,backgroundColor:"#FBFBFC" }}>
        <HeaderView
          componentId={this.props.componentId}
          backgroundColor={"#ffffff"}
          leftButtonColor={"#4A4B6D"}
          renderCenter={this.renderCenter}
          navigator={this.props.navigator}
        />
        {this.selectAuthor()}
        {this.selectBusiType()}
        {this.shopList(this.cardData, this.cardLayout)}
        {this.footView()}
      </View>
    );
  }
}
